<template> 
    <div class='goodsImgsSlide'>  
        <!-- 轮播图 -->
        <div class="slider relative">
            <!-- :show-dots:是否显示轮播小圆点 -->
            <swiper :show-dots='false' height="16rem" v-model="sliderIndex">
                <swiper-item class="black" v-for="datas in goodsImgsSlideData" :key="datas.medium">
                    <div class="slideSho">
                        <img v-bind:src='datas.medium' alt="">
                    </div>
                </swiper-item>            
            </swiper>
            <p class='absolute white lineHeight1 fontSize0_7 borderRadius0_13 grayBackground888 textCenter width1_8 leftPer82 topPer88'>{{sliderIndex+1}}/6</p>
        </div>   
    </div>
</template>

<script>
import { Swiper, SwiperItem } from 'vux'
import '../../../style/normalize.css'
import '../../../style/base.css'
import './css/goods.scss'

export default {
    components: {
        Swiper,
        SwiperItem
    },    
    props: {
        // 从父组件传递过来的数据
        goodsImgsSlideData: {
            default: function() {
                return []
            }
        }      
    },  
    data () {
        return {
            // 页面刚加载轮播图的初始下标 
            sliderIndex: 0
        }   
    },   
    methods: {

    }   
}
</script>

